<script setup>
// 前端开发：先死后活，前端页面数据都是死的，只有调用后端数据才是真正的网络数据
// 导入axios
import axios from 'axios'
//导入ref
import { ref } from 'vue'
//导入user.js
import {userGetAllService} from './api/user.js'
//定义响应数据
const users = ref([])
//获取所有用户信息
let data=userGetAllService()
users.value=data
</script>

<template>
  <h2>用户信息列表</h2>
  <table>
    <tr>
      <th>ID</th>
      <th>用户名</th>
      <th>密码</th>
      <th>信息</th>
      <th>余额</th>
      <th>操作</th>
    </tr>

    <tr  v-for="user in users">
      <td>{{user.id}}</td>
      <td>{{user.username}}</td>
      <td>{{user.info}}</td>
      <td>{{user.status}}</td>
      <td>{{user.balance}}</td>
      <td>
        <button>修改</button>
        <button>删除</button>
      </td>
    </tr>
  </table>

</template>

<style scoped>

</style>